import React from 'react';
import { Grade, getScoreLevel, getScoreLevelText } from '../types';
import './GradeTable.css';

interface GradeTableProps {
  grades: Grade[];
  onViewDetail: (grade: Grade) => void;
  onEdit: (grade: Grade) => void;
  onDelete: (grade: Grade) => void;
}

const GradeTable: React.FC<GradeTableProps> = ({
  grades,
  onViewDetail,
  onEdit,
  onDelete,
}) => {
  // 获取分数对应的样式类
  const getScoreClass = (score: number): string => {
    if (score >= 90) return 'text-green-600 font-semibold';
    if (score >= 60) return 'text-blue-600 font-medium';
    return 'text-red-600 font-medium';
  };

  // 获取等级对应的样式类
  const getLevelClass = (level: string): string => {
    switch(level) {
      case 'A': return 'bg-green-100 text-green-800';
      case 'B': return 'bg-blue-100 text-blue-800';
      case 'C': return 'bg-yellow-100 text-yellow-800';
      case 'D': return 'bg-orange-100 text-orange-800';
      case 'F': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  // 渲染空数据状态
  if (grades.length === 0) {
    return (
      <div className="empty-state flex flex-col items-center justify-center p-8 text-center">
        <div className="text-5xl mb-4">📊</div>
        <div className="text-xl font-medium text-gray-700 mb-2">暂无成绩记录</div>
        <div className="text-gray-500">请通过添加成绩按钮创建新的成绩记录</div>
      </div>
    );
  }

  return (
    <div className="overflow-hidden rounded-xl shadow-md bg-white">
      <table className="w-full min-w-full border-collapse">
        <thead className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b-2 border-blue-100">
          <tr>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">序号</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">学期</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">考试类型</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">学生姓名</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">科目</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">分数</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">等级</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">排名</th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700">备注</th>
            <th className="px-6 py-3 text-center text-sm font-semibold text-gray-700">操作</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {grades.map((grade, index) => {
            const level = getScoreLevel(grade.score, grade.subject);
            const levelText = getScoreLevelText(grade.score, grade.subject);
            const scoreClass = getScoreClass(grade.score);
            const levelClass = getLevelClass(level);
            
            return (
              <tr key={grade.id} className="hover:bg-blue-50 transition-colors duration-150">
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{index + 1}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{grade.term}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{grade.examType}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="text-sm font-medium text-gray-800">{grade.studentName}</div>
                  <div className="text-xs text-gray-500">{grade.studentId}</div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{grade.subject}</td>
                <td className={`px-6 py-4 whitespace-nowrap text-sm ${scoreClass}`}>{grade.score}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${levelClass}`}>
                    {levelText} ({level})
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{grade.rank || '-'}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{grade.remark || '-'}</td>
                <td className="px-6 py-4 whitespace-nowrap text-center">
                  <div className="flex justify-center space-x-2">
                    <button
                      className="px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded hover:bg-blue-100 transition-colors duration-150"
                      onClick={() => onViewDetail(grade)}
                      title="查看详情"
                    >
                      查看
                    </button>
                    <button
                      className="px-3 py-1 text-xs font-medium text-green-600 bg-green-50 rounded hover:bg-green-100 transition-colors duration-150"
                      onClick={() => onEdit(grade)}
                      title="编辑"
                    >
                      编辑
                    </button>
                    <button
                      className="px-3 py-1 text-xs font-medium text-red-600 bg-red-50 rounded hover:bg-red-100 transition-colors duration-150"
                      onClick={() => onDelete(grade)}
                      title="删除"
                    >
                      删除
                    </button>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default GradeTable;